<template>
    <div class="pad">
        <el-card shadow="hover" class="articleCard">
            <div>
                <el-link style="font-size: xx-large"
                         :underline="false"
                         :href="`/article?articleId=${articleId}`"
                         target="_blank">
                    {{ title }}
                </el-link>
                <el-icon
                        color="#ffd700"
                        size="30"
                        v-if="isElite"
                >
                    <StarFilled/>
                </el-icon>
            </div>
            <div>
                <el-text style="margin-right: auto">
                    <el-icon>
                        <Timer/>
                    </el-icon>
                    发表于{{ postTime }}
                </el-text>
            </div>
            <div>
                <el-text style="margin-right: auto">
                    {{ summary }}
                </el-text>
            </div>
            <el-button @click="toPersonEdit" type="primary">
                编辑
            </el-button>
            <el-button @click="openDialog">
                删除
            </el-button>
        </el-card>
        <el-dialog
                v-model="dialogVisible"
                title="Tips"
                width="30%"
        >
            <span>确认要删除这篇文章吗</span>
            <template #footer>
      <span class="dialog-footer">
          <el-button type="danger" @click="Delete">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
      </span>
            </template>
        </el-dialog>
    </div>

</template>

<script setup>

import { StarFilled, Timer, User} from "@element-plus/icons-vue";
import {getWithToken} from "@/net/postAndGetMethodWithToken";
import {ElMessage} from "element-plus";
import {ref} from "vue";
const props = defineProps(["articleId","title","summary","postTime","isElite"])
const dialogVisible = ref(false)

const toPersonEdit = ()=>{
    window.open('/edit-article?articleId='+props.articleId)
}

const Delete = () => {
    getWithToken(`/api/article/delete?articleId=${props.articleId}`, (data, code, message) => {
        if (code == 200) {
            ElMessage.success("删除成功")
            location.reload()
        }
    },()=>{
        ElMessage.warning("删除失败")
    })
}
const openDialog =()=>{
    dialogVisible.value = true
}

</script>

<style >
.pad{
    padding: 10px;
}
.articleCard{
    width: 900px;
    height: 180px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    position: relative;
    opacity: 0.7;
    /*flex-wrap: wrap;*/
}
</style>